<!-- 首页轮播图组件 -->
<template>
  <div class="swiper">
    <swiper :options="swiperOption" v-if="swiperListShow">
      <!-- slides  data-swiper-autoplay="2000" 设置自动滚动频率 -->
      <swiper-slide v-for="itme of swiperList" :key="itme.id" data-swiper-autoplay="2000">
        <img class="img" :src="itme.imgUrl"/>
      </swiper-slide>
      <!-- Optional controls -->
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"  slot="pagination"></div>
      <!-- 如果需要导航按钮 -->
      <!-- <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div> -->
      <!-- 如果需要滚动条 -->
      <!-- <div class="swiper-scrollbar"   slot="scrollbar"></div> -->
    </swiper>
  </div>
</template>

<script>
export default {
  name: 'homeswiper',
  props: ['swiperList'],
  data () {
    return {
      swiperOption: {
        // 所有的参数同 swiper 官方 api 参数
        pagination: '.swiper-pagination', /* 分页器挂载到swiper-pagination类对应的元素上 */
        loop: true, /*, 开启轮播图前后循环模式 */
        autoplay: true /* 是否自动滑动 */
      }
    }
  },
  computed: {
    swiperListShow () {
      return this.swiperList.length
    }
  }

}
</script>

<style lang="stylus" scoped>
  /* 分页器之后轮播图上就有了几个小圆点了，默认选中的圆点是蓝色的，但是设计图中是白色的
  然鹅这个类不是我们当前组件中定义的元素，所以在以scoped修饰的css代码中我们不能
  直接修改该元素的样式，这个时候，我们就要用到样式“穿透”，>>>
  从而可以不受scoped的限制来修改样式了 */
  .swiper >>> .swiper-pagination-bullet-active
    background: #fff
  .swiper
    overflow: hidden
    width: 100%
    height: 0
    /*
    为什么采用padding-bottom就可以实现高度自适应呢？
    因为padding-bottom以百分比进行显示的时候是相对于父元素的width而言的。
    我们将swiper的父级元素swiper宽度设置为100%是相对于swiper父元素的宽度而言的，
    padding-bottom设置为55%也是相对于swiper父元素的宽度而言的，
    但由于swiper的宽度已经和它父元素宽度相等（100%）了，
    所以padding-bottom就相当于swiper元素的高宽比就是55%，
    它的高度就会相对于它的宽度自动撑开55%。
    55%的算法就是图片的高度/宽度*100
    */
    padding-bottom: 53%
    background: #eee
    .img
      width: 100%
</style>
